<template>
	<view>
		<view class="list" v-for="(item,index) in list" :key="item.xin_order_id">
			<view class="head">
				<view class="order-number">
					
					<image  :src="common.appUrl.oss+common.imgList.ordernum" mode="widthFix" class="select-address">
					</image>
					
					</image>
					<view>{{item.order_no}}</view>
				</view>
				<view class="state">{{item.status_text}}</view>
			</view>
			<view class="detail">
				<image v-if="type == 1" :src="common.appUrl.oss+common.imgList.nullimg" mode="widthFix" class="select-address"></image>
				<image v-else :src="$wanlshop.oss(item.goods_img, 255, 255)" mode="widthFix" class="select-address">
				<view class="more">
					<view class="name">{{item.drug_name}}</view>
					<view class="num">x{{item.drug_num}}</view>
				</view>
			</view>
			<view class="time">{{ item.createtime_text }}</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list:[],
				type:1
			}
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		onLoad(option) {
			this.type = option.type
			this.loadData(option.type)
		},
		methods: {
			async loadData(type) {
				await uni.request({
					url: '/wanlshop/product/getXinOrder',
					data: {
						type:type
					},
					method: 'GET',
					success: res => {
						this.list = res.data
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.list {
		background-color: #fff;
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		border-radius: 16rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 30rpx;
			width: 630rpx;
			height: 80rpx;

			.order-number {
				display: flex;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				view {
					font-size: 26rpx;
					color: #999;
					margin-left: 20rpx;
				}
			}

			.state {
				color: #84BD00;
				font-size: 26rpx;
			}

		}

		.detail {
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			width: 630rpx;
			border-top: 1px solid #f8f8f8;
			border-bottom: 1px solid #f8f8f8;
			padding: 30rpx 0;

			image {
				width: 180rpx;
				height: 180rpx;
			}

			.more {
				width: 430rpx;
				height: 160rpx;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				margin-left: 20rpx;

				.name {
					width: 100%;
					font-size: 30rpx;
				}

				.num {
					width: 100%;
					font-size: 26rpx;
					color: #f00;
				}
			}
		}

		.time {
			font-size: 26rpx;
			line-height: 88rpx;
			text-align: right;
			color: #999;
			margin-right: 30rpx;
		}
	}
</style>